<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>评论</title>
    <!-- <link rel="stylesheet" href="./css/style.css"> -->
    <!-- <link rel="stylesheet" href="./css/find.css"> -->
    <style>
        body, html{font-family: PingFangSC-Regular, sans-serif;}
        body,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        hr,
        p,
        blockquote,
        dl,
        dt,
        dd,
        ul,
        ol,
        li,
        pre,
        form,
        fieldset,
        legend,
        button,
        input,
        textarea,
        th,
        td {
            margin: 0;
            padding: 0;
        }

        body,
        button,
        input,
        select,
        textarea {
            font: 12px/1.5tahoma, arial, \5b8b\4f53;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-size: 100%;
        }

        address,
        cite,
        dfn,
        em,
        var {
            font-style: normal;
        }

        code,
        kbd,
        pre,
        samp {
            font-family: couriernew, courier, monospace;
        }

        small {
            font-size: 12px;
        }

        ul,
        ol {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        sup {
            vertical-align: text-top;
        }

        sub {
            vertical-align: text-bottom;
        }

        legend {
            color: #000;
        }

        fieldset,
        img {
            border: 0;
        }

        button,
        input,
        select,
        textarea {
            font-size: 100%;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        .line {
            width: 100%;
            height: 10px;
            background: #f3f3f3;
        }

        .bor_no {
            border: none!important;
        }

        .red_color {
            color: #FF4954!important;
        }

        .dind1{
            width: 100%;
            overflow: hidden;
            background: #F2F2F2;
        }
        .dind2{
            width: 100%;
            overflow: hidden;
            background: #F2F2F2;
        }
        .find_user_info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 18px 18px 5px 18px;
        }

        .find_user_flex {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #2A2A2A;
            font-weight: 500;
        }

        .user_info_head {
            width: 28px;
            height: 28px;
            border-radius: 100%;
            overflow: hidden;
            margin-right: 7px;
        }

        .user_info_head img {
            width: 100%;
            height: 100%;
        }

        .find_user_time {
            font-size: 12px;
            color: #B5B5B5;
            font-weight: 400;
        }

        .find_desc {
            padding: 0 18px 10px 51px;
            font-size: 14px;
            color: #6F757C;
            font-weight: 400;
        }

        .find_user_selfie {
            padding: 0px 18px 18px 0;
            margin-left: 51px;
            border-bottom: 1px solid #DFDFDF;
            display: flex;
            flex-wrap: wrap;
        }

        .find_user_selfie_img {
            width: 80px;
            height: 80px;
            margin-right: 6px;
            margin-bottom: 6px;
        }

        .find_user_selfie_img img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .videoBgs {
            padding: 18px;
            width: 100%;
            height: 200px;
            box-sizing: border-box;
            /* overflow: hidden; */
        }

        .find_chazhuang_img {
            width: 100%;
            height: auto;
        }

        .find_chazhuang_img img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .find_chazhuang {
            box-sizing: border-box;
            overflow: hidden;
            margin-top: 40px;
        }

        .swiper_box {
            width: 190px;
            margin-top: 40px;
            margin-bottom: -20px;
            overflow-x: scroll;
        }

        .swiper {
            width: 10000px;
            display: flex;
            overflow-x: scroll;
        }

        .swiper_item {
            width: 300px;
            height: 118px;
            background: #ccc;
            margin-right: 20px;
            overflow-x: scroll;
        }

        .swiper-container {
            margin-top: 40px!important;
            width: 100%;
            height: 118px;
            margin-bottom: -20px!important;
        }

        .swiper-slide {
            /* text-align: center; */
            font-size: 18px;
            background: #fff;
            min-width: 300px;
            width: auto!important;
            font-size: 10px;
            color: #6F757C;
            font-weight: 400;
        }

        .swiper-slide>div {
            height: 28px;
            border-bottom: 1px solid #DFDFDF;
            display: flex;
            align-items: center;
            margin: 0 18px;
        }

        .swiper-slide>div:last-child {
            border: none;
        }

        .swiper-slide>div>div:nth-child(1) {
            /* width: 50%; */
        }

        .swiper-slide>div>div:nth-child(2) {
            /* width: 50%; */
            padding-left: 50px;
        }

        .find_swiper_flex {
            display: flex;
            align-items: center;
        }

        .find_nav_box {
            height: 50px;
            width: 100%;
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #C3C3C3;
            font-weight: 500;
            border-bottom: 1px solid #eee;
        }

        .find_total {
            width: 32%;
            padding-left: 18px;
        }

        .find_nav {
            width: 100%;
            display: flex;
            justify-content: space-around;
        }

       .find_nav div{
            /* width: 24%; */
            position: relative;
        }
        .find_nav_active{
            color: #2A2A2A;
        }
        .find_nav_active:after{
            content: "";
            position: absolute;
            border-bottom: 2px solid #2A2A2A;
            bottom: -16px;
            left: 0;
            width: 100%;
        }
        .mask{
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            background: rgba(0,0,0,.2);
            z-index: 99;
            display: none;
        }
        .msg_box{
            width: 80%;
            min-height: 130px;
            position: absolute;
            left: 50%;
            top: 40%;
            margin-left: -40%;
            z-index: 999;
            background: #fff;
            border-radius: 10px;
            text-align: center;
        }
        .title{
             height: 40px;
             line-height: 40px;
        }
        .content{
            padding: 0 18px 50px 18px;
        }
        .okbtn{
            color: #007bfe;
            height: 40px;
            position: absolute;
            bottom: 0;
            width: 100%;
            line-height: 40px;
            font-weight: bold;
            border-top: 1px solid #eee;
        }
    </style>
</head>

<body>
    <div class="find">
        <div class="mask">
            <div class="msg_box">
                <div class="title">提示</div>
                <div class="content"></div>
                <div class="okbtn">确认</div>
            </div>
        </div>
        <div class="find_tab_box">
            <div class="dind3 finds" style="display: block">
                    <div class="nopeople" style="display: none">暂无人评论。</div>
            </div>
        </div>
    </div>
 
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
     $(".okbtn").click(function() {
        $(".mask").hide()
    })
    $.getUrlParam = function (name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }
    var token = $.getUrlParam('token');
    var id = $.getUrlParam('id');
    var host = $.getUrlParam('host');
    var protocol = $.getUrlParam('protocol');
    var tab = $.getUrlParam('tab');

    var videoData1 = null;
    var videoData2 = null;
    // 评论str
    var render_pinlun = function (list) {
        var part = '<div>' +
            '<div class="find_user_info">' +
            '<div class="find_user_flex">' +
            '<div class="user_info_head">' +
            '<img src=' + list.user_avatar + ' alt="">' +
            '</div>' +
            ' <div>' + list.nickname + '</div>' +
            '</div>' +
            '<div class="find_user_time">' + list.add_time + '</div>' +
            '</div>' +
            '<div class="find_desc">' + list.content +
            '</div>' +
            '<div class="find_user_selfie">';
        list.pictures.forEach(function (i, v) {
            part += '<div class="find_user_selfie_img">' +
                '<img src=' + i.img_url + ' alt="">' +
                '</div>';
        });
        part += '</div>' +
            '</div>';
        return part;
    }
    // 获取评论列表
    $.ajax({
        type: "GET",
        url: protocol + '://' + host +'/product/products/' + id + "/comments?offset=0&limit=20",
        dataType: 'json',
        success: function (data) {
            var datas = data && data;
            if(!data.code) {
                 for (var i = 0; i < data.items.length; i++) {
                    $(".dind3").append(render_pinlun(datas.items[i]));
                }
                console.log(datas)
                if (data.items.length == 0){
                    $(".nopeople").show()
                }else{
                    $(".nopeople").hide()
                }
            }else{
                $(".mask").show();
                $(".content").html(data.msg)
            }
        },
        error: function(error) {
            $(".mask").show();
            $(".content").html("加载失败")
            console.log(error)
        }
    });
    
</script>

</html>